{% extends 'base_main.html' %}
    {% block title %}
    <title>写文章</title>
    {% endblock %}
{% block content%}
{{block.super}}

        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-lg-10 col-md-offset-2 main" id="main">
            <div class="row">
                <form action="" method="post" class="add-article-form" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="col-md-9">
                        <h1 class="page-header">撰写新文章</h1>
                        <div class="form-group">
                            <label for="article-title" class="sr-only">标题</label>
                            <input type="text" id="article-title" value="标题" name="title" class="form-control"
                                   placeholder="在此处输入标题" required autofocus autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label for="editor_id" class="sr-only">内容</label>
                            <textarea id="editor_id" name="content" style="height: 400px;width: 925px;resize:none;"></textarea>
                        </div>
                        <div class="add-article-box">
                            <h2 class="add-article-box-title"><span>关键字</span></h2>
                            <div class="add-article-box-content">
                                <input type="text" value="关键字" class="form-control" placeholder="请输入关键字" name="keywords"
                                       autocomplete="off">
                                <span class="prompt-text">多个标签请用英文逗号,隔开。</span>
                            </div>
                        </div>
                        <div class="add-article-box">
                            <h2 class="add-article-box-title"><span>描述</span></h2>
                            <div class="add-article-box-content">
                                <textarea class="form-control" name="describe" autocomplete="off">描述</textarea>
                                <span class="prompt-text">描述是可选的手工创建的内容总结，并可以在网页描述中使用</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <h1 class="page-header">操作</h1>
                        <div class="add-article-box">
                            <h2 class="add-article-box-title"><span>栏目</span></h2>
                            <div class="add-article-box-content">
                                <ul class="category-list">
                                    {% for col in col_list %}
                                    <li>
                                        <label>
                                            <input name="category" type="radio" value="{{col.id}}" checked>
                                            {{col.name}} <em class="hidden-md"></em></label>
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                        <div class="add-article-box">
                            <h2 class="add-article-box-title"><span>标签</span></h2>
                            <div class="add-article-box-content">
                                <input type="text" class="form-control" placeholder="输入新标签" name="tags"
                                       autocomplete="off" value="标签">
                                <span class="prompt-text">多个标签请用英文逗号,隔开</span></div>
                        </div>
                        <div class="add-article-box">
                            <h2 class="add-article-box-title"><span>标题图片</span></h2>
                            <div class="add-article-box-content">
                                <input type="file" class="form-control" placeholder="点击按钮选择图片" id="pictureUpload"
                                       name="titlepic" autocomplete="off" >
                            </div>
                            <!--<div class="add-article-box-footer">-->
                                <!--<button class="btn btn-default" type="button" ID="upImage">选择</button>-->
                            <!--</div>-->
                        </div>
                        <div class="add-article-box">
                            <h2 class="add-article-box-title"><span>发布</span></h2>
                            <div class="add-article-box-content">
                                <p><label>状态：</label><span class="article-status-display">未发布</span></p>
                                <p><label>公开度：</label><input type="radio" name="visibility" value="0" checked/>公开 <input
                                        type="radio" name="visibility" value="1"/>加密</p>
                            </div>
                            <div class="add-article-box-footer">
                                <button class="btn btn-primary" type="submit" name="submit">发布</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

{% endblock %}
{% block js %}
{{block.super}}
{% load static %}
    <script type="text/javascript" src="{% static 'kindeditor/kindeditor-all.js' %}"></script>
    <script type="text/javascript" src="{% static 'kindeditor/lang/zh-CN.js' %}"></script>
    <script type="text/javascript">
        KindEditor.ready(function(K) {
                window.editor = K.create('#editor_id',{
                    uploadJson:'/util/upload/kindeditor'
                });
        });
    </script>
{% endblock %}
